<template>
  <div class="pd-30">
    <div class="header">
      <div class="flex">
        <div class="center">
          <el-input
            class="w-200"
            style="margin-right: 50px"
            v-model="input"
            placeholder="学生名"
          ></el-input>
        </div>
        <div class="flex">
          <div class="center">
            <el-input
              class="w-200"
              style="margin-right: 50px"
              v-model="input"
              placeholder="地址"
            ></el-input>
          </div>
          <div class="center">
            <el-input
              class="w-200"
              style="margin-right: 50px"
              v-model="input"
              placeholder="就读学校"
            ></el-input>
          </div>
          <el-select
            style="margin-right: 50px"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="flex header_bot">
        <div class="flex">
          <el-select
            style="margin-right: 50px"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-right: 50px"
            v-model="value"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="flex">
          <div class="center" style="margin-right: 50px">
            <el-button plain class="w-150">重置</el-button>
          </div>
          <div class="center" style="margin-right: 50px">
            <el-button type="primary" class="w-150">搜索</el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="信息"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      center
    >
      <div class="dialog_box">
        <div class="dialog_div">
          <div class="dialog_title">学生名称：</div>
          <el-input
            class="w-200"
            v-model="input"
            placeholder="请输入"
          ></el-input>
        </div>
        <div class="dialog_div">
          <div class="dialog_title">出生日期：</div>
          <el-date-picker
            class="w-200"
            v-model="DateBirth"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div class="dialog_div">
          <div class="dialog_title">性别：</div>
          <el-radio v-model="radio" label="1">男</el-radio>
          <el-radio v-model="radio" label="2">女</el-radio>
        </div>
        <div class="dialog_div">
          <div class="dialog_title">就读学校：</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dialog_div">
          <div class="dialog_title">所在年级：</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dialog_div">
          <div class="dialog_title">分配交付中心：</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="dialog_div">
          <div class="dialog_title">课程选择：</div>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <div class="box_cen">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          fixed
          align="center"
          type="index"
          label="编号"
          width="100"
        >
        </el-table-column>
        <el-table-column
          fixed
          align="center"
          prop="name"
          label="学生名称"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="出生日期"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="address" align="center" label="性别" width="80">
        </el-table-column>
        <el-table-column
          prop="address"
          align="center"
          label="就读学校"
          width="120"
        >
        </el-table-column>
        <!-- <el-table-column prop="city" align="center" label="年级" width="120">
          </el-table-column> -->
        <el-table-column
          prop="city"
          align="center"
          label="所在年级"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="city"
          align="center"
          label="分配交付中心"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          label="课程选择"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="date"
          align="center"
          label="创建时间"
          width="150"
        >
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="dialogVisible = true"
              >编辑</el-button
            >
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "Offlinestudents",
  data() {
    return {
      // 弹框是否显示
      dialogVisible: false,
      // 出生年月日
      DateBirth: "",
      // 性别
      radio: "1",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>
  <style scoped>
.header {
}
.header_bot {
  margin-top: 40px;
}
.box_cen {
  margin-top: 50px;
}
.dialog_box{
  height: 300px;
  overflow: auto;
}
.dialog_div {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.dialog_title{
  width: 100px;
  text-align: right;
 margin-right: 10px;
}

</style>